<template>
  <div class="amap-page-container">
    <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo" :plugin="plugin">
      <el-amap-marker :content="marker.content" :key="marker.index" v-for="marker in markers" :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable" />
    </el-amap>
    <div class="toolbar">
      <span v-if="loaded">
        <!-- location: lng = {{ lng }} lat = {{ lat }} -->
      </span>
      <span v-else>正在定位</span>
    </div>
    <!-- swiper -->
    <div class="swiperscope">
      <swiper :options="swiperOption" ref="mySwiper" :not-next-tick="notNextTick">
        <swiper-slide v-for="marker in markers" :key="marker.index">
          <div style="height:200px;" v-on:click="tomap(marker.index, marker.name)">
            <img :src="marker.swiperUrl" alt="" srcset="" class="hd-img-responsive" style="width:100%;height:150px;float:left;">
            <div class="imgtitle">{{marker.name}}</div>
            <div class="imgstar"><div style="float:left;"><yd-rate slot="left" v-model="marker.star" :readonly="true" color="#ff9800" activeColor="#ff9800" size="12px" padding="1px"></yd-rate></div><div style="text-align:left;">15条评价</div></div>
          </div>
        </swiper-slide>
        <!-- <div class="swiper-pagination" slot="pagination"></div> -->
      </swiper>
    </div>
  </div>
</template>

<style lang="stylus" scoped>
.imgtitle
  float left
  padding-left 15px
  width 100%
  height 25px
  text-align left
  font-size 20px
.imgstar
  width 100%
  height 25px
  float left
  padding-left 15px
  font-size 10px
.amap-demo
  height 300px
.swiperscope
  height 4rem
// 滑动样式
.swiper-container
  width 100%
  height 100%
  margin 10px auto
.swiper-slide
  text-align center
  font-size 18px
  width 60%

  /* Center slide text vertically */
  display flex
  justify-content center
  align-items center
</style>

<script>
export default {
  name: 'amap-page',
  data() {
    let thiz = this;
    return {
      zoom: 14,
      center: [121.5273285, 31.21515044],
      star: 3,
      plugin: [{ // 定位插件,定位用户当前位置
        pName: 'Geolocation',
        events: {
          init(o) {
            // o 是高德地图定位插件实例
            o.getCurrentPosition((status, result) => {
              if (result && result.position) {
                thiz.lng = result.position.lng;
                thiz.lat = result.position.lat;
                thiz.center = [thiz.lng, thiz.lat];
                thiz.loaded = true;
                thiz.$nextTick();
              } else {
                if (status === 'error') { // 如果定位失败,执行默认值
                  thiz.lng = 121.5273285
                  thiz.lat = 31.21515044
                  thiz.center = [thiz.lng, thiz.lat];
                  thiz.loaded = true;
                  thiz.$nextTick();
                }
              }
            });
          }
        }
      }],
      lng: 0,
      lat: 0,
      loaded: false,
      markers: [], // 地图markers
      notNextTick: true,
      // swiper 参数设置 详见
      swiperOption: {
        pagination: '.swiper-pagination',
        slidesPerView: 'auto',
        centeredSlides: false,
        paginationClickable: true,
        spaceBetween: 30
        //, loop: true // 循环输出组件有问题,暂时不进行循环输出
      }
    }
  },
  // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted: function() {
    this.load()
  },
  methods: {
    // 跳转某一个图片
    slideToAny(index) {
      this.swiper.slideTo(index, 1000, false)
    },
    initInfo(index, name) {
      let info = document.createElement('div')
      info.className = 'hd-map-tips'
      let spaninfo = document.createElement('span')
      spaninfo.innerHTML = name
      spaninfo.addEventListener('touchstart', () => {
        alert(index); this.slideToAny(index)
      })
      spaninfo.ontouch = () => { alert(index); this.slideToAny(index) }
      info.appendChild(spaninfo)
      return info
    },
    load() {
      this.hdAjax({
        url: this.API.findTwoByUseList,
        data: {
          type: 'J',
          id: this.$route.query.id
        },
        success: (resultData) => {
          let surl = []
          let makertemp = []
          for (let index = 0; index < resultData.data.results.length; index++) {
            let long = resultData.data.results[index].longitude
            let lat = resultData.data.results[index].latitude
            surl.push(resultData.data.results[index].image)
            let marker = {}
            marker.star = resultData.data.results[index].star
            let name = resultData.data.results[index].name
            marker.name = name
            marker.index = index
            marker.swiperUrl = surl[index]
            marker.position = [long, lat]
            marker.center = [long, lat]
            // marker.position = [this.center[0], this.center[1]]
            marker.events = {click: () => { alert(1); this.slideToAny(index) }}  // 此点击事件只在不设置 content 中生效
            marker.visible = true
            marker.draggable = false
            marker.content = this.initInfo(index, name) // 绘制内容点击
            makertemp.push(marker)
          }
          this.markers = makertemp
        }
      });
    },
    tomap(index, name) {
      this.markers[index].content = this.initInfo(index, name)
      console.log(this.markers[index].content)
    }
  }
}
</script>

<style lang="stylus">
.hd-map-tips{
  // position: relative;
  // background: #eaeaea;
  // cursor: help;
  // display: inline-block;
  // text-decoration: none;
  // color: #222;
  // outline: none;
}

.hd-map-tips span	{
  // visibility: hidden;
  position: absolute;
  bottom: -24px;
  left: -26px;
  // z-index: 999;
  width: 1.4rem;
  margin-left: 0;
  padding: .17rem;
  border: 2px solid #ffffff;
  opacity: .9;
  background-color: #ffffff;
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.hd-map-tips span:before,
.hd-map-tips span:after	{
  content: "";
  position: absolute;
  z-index: 1000;
  bottom: -7px;
  left: 50%;
  margin-left: -8px;
  border-top: 6px solid #ffffff;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 0;
}

.hd-map-tips span:before{
  border-top-color: #ccc;
  bottom: -9px;
}
</style>
